'use client';

import NavigationBar from "@/components/ui/navigation-bar";
import VerticalNavigation from "@/components/ui/vertical-navigation";
import NodeList from "@/components/ui/node-list";
import ResourceList from "@/components/ui/resource-list";
import CatalogList from "@/components/ui/catalog-list";
import Designer from "@/components/core/designer";

import { ReactFlowProvider } from "@xyflow/react";
import NotificationsPanel from "@/components/ui/notifications-toast";
import Editor from "@/components/ui/editor";
import FeedbackPanel from "@/components/ui/feedback-panel";
import { useSidebarStore } from "@/stores/sidebar-store";
import { useDocumentStore } from "@/stores/document-store";
import SimpleDocumentPanel from "@/components/ui/simple-document-panel";
import FloatingPanel from "@/components/ui/floating-panel";
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";

export default function Page() {
  const { floatingPanels, setFloatingPanelOpen } = useSidebarStore();
  const { isDocumentPanelOpen } = useDocumentStore();

  return (
    <main className="bg-white h-screen overflow-hidden">
      <NavigationBar />
      {/* Divider */}
      <div className="h-px bg-gray-200"></div>
      <div className="flex h-[calc(100vh-50px)]">
        <VerticalNavigation />
        <div className="flex flex-1 overflow-hidden">
          <ReactFlowProvider>
            <PanelGroup direction="horizontal" id="main-panels">
              {/* Document Panel - Left Side */}
              {isDocumentPanelOpen && (
                <>
                  <Panel id="document-panel" defaultSize={40} minSize={25} maxSize={40}>
                    <SimpleDocumentPanel />
                  </Panel>
                  <PanelResizeHandle
                    id="document-resize-handle"
                    className="w-1 bg-gray-200 hover:bg-gray-300 transition-colors"
                  />
                </>
              )}

              {/* Main Content Area */}
              <Panel id="main-content" defaultSize={isDocumentPanelOpen ? 60 : 100}>
                <div className="flex h-full relative">
                  <div className="flex-grow h-full">
                    <Designer />
                  </div>
                  <Editor />
                  <div>
                    <FloatingPanel
                      title="Components"
                      isOpen={floatingPanels.components}
                      onClose={() => setFloatingPanelOpen('components', false)}
                      width="w-72"
                      height="h-[calc(100vh-80px)]"
                      position={{ left: 10, top: 10 }}
                    >
                      <NodeList />
                    </FloatingPanel>
                    <FloatingPanel
                      title="Canvas"
                      isOpen={floatingPanels.canvas}
                      onClose={() => setFloatingPanelOpen('canvas', false)}
                      width="w-72"
                      height="h-[calc(100vh-80px)]"
                      position={{ left: 10, top: 10 }}
                    >
                      <ResourceList />
                    </FloatingPanel>

                    <FloatingPanel
                      title="EventCatalog Resources"
                      isOpen={floatingPanels.catalog}
                      onClose={() => setFloatingPanelOpen('catalog', false)}
                      width="w-72"
                      height="h-[calc(100vh-80px)]"
                      position={{ left: 10, top: 10 }}
                    >
                      <CatalogList />
                    </FloatingPanel>
                  </div>
                </div>
                {/* Floating Panels */}



              </Panel>
            </PanelGroup>
          </ReactFlowProvider>
        </div>
      </div>





      <NotificationsPanel />
      <FeedbackPanel />
    </main>
  );
}